import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:wan_android_flutter/common/base/base_page.dart';
import 'package:wan_android_flutter/common/resources/spacing.dart';
import 'package:wan_android_flutter/common/resources/text_styles.dart';
import 'package:wan_android_flutter/common/widget/material_layout.dart';
import 'package:wan_android_flutter/res/assets_res.dart';

import '../../../common/routes/route_manager.dart';
import 'knowledge_system_logic.dart';

class KnowledgeSystemPage extends BasePage<KnowledgeSystemLogic> {
  KnowledgeSystemPage({super.key});

  @override
  bool showAppBar() {
    return false;
  }

  @override
  Widget buildContent(BuildContext context) {
    return Obx(() {
      return ListView.separated(
        itemBuilder: (context, index) {
          String name = logic.state.knowledges[index].name ?? "";
          String subTitle = logic.state.knowledges[index].children?.map((element) {
                return element.name ?? "";
              }).join(" ") ??
              "";
          return MaterialLayout(
            backgroundColor: colorData.bgWhite,
            padding: const EdgeInsets.all(16),
            onPressed: () {
              Get.toNamed(RouteManager.singleKnowledgePage, arguments: logic.state.knowledges[index]);
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                    child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      style: colorData.textBlack.s18.regular,
                    ),
                    Spacing.vSpacing10,
                    Text(
                      subTitle,
                      style: colorData.textGray.s15.regular,
                    )
                  ],
                )),
                Spacing.hSpacing16,
                Image.asset(
                  AssetsRes.ARROW,
                  color: colorData.textBlack,
                  width: 20,
                  height: 20,
                )
              ],
            ),
          );
        },
        itemCount: logic.state.knowledges.length,
        separatorBuilder: (context, index) => Container(
          height: 16.0,
          color: colorData.bgDivider,
        ),
      );
    });
  }
}
